<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
    }
    
    td,th {
        border: 1px solid #333;
    }
    
    thead tr {
        height: 40px;
        background-color: #ccc;
    }
    tbody tr{
        height: 40px;
    }
</style>
<body>
<table>
    <thead  cellspacing="0">
        <tr>
            <td>姓名</td>
            <td>科目</td>
            <td>成绩</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</body>
<script>
    var data = [{
        name:'董良',
        subject:'数学',
        score:100
    },
    {
        name:'张三',
        subject:'数学',
        score:95
    },
    {
        name:'李四',
        subject:'数学',
        score:90
    },
    {
        name:'来来',
        subject:'数学',
        score:92
    },
    {
        name:'王五',
        subject:'数学',
        score:91
    },
   ]
    var tbody = document.querySelector('tbody');
    for(var i=0;i<data.length;i++){
       var trr = document.createElement('tr');
       tbody.appendChild(trr);
        for (var k in data[i]) { // 里面的for循环管列 td 对象里面有个属性就循环几次
                // 创建单元格 
                var td = document.createElement('td');
                // 把对象里面的属性值 datas[i][k] 给 td  
                td.innerHTML = data[i][k];
                trr.appendChild(td);
            } 
            
       //创建删除单元格
       var tdd = document.createElement('td');
        tdd.innerHTML = '<a href="javascript:;">删除</a>'
        trr.appendChild(tdd);

      } 
      
        var a =document.querySelectorAll('a');
        for(var j = 0 ;j<a.length;j++){
        a[j].onclick=function(){
        tbody.removeChild(this.parentNode.parentNode);
        }
    } 
</script>
</html>